<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
<head th:replace="include/head::head('组卷系统后台 | 用户管理')"></head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!--Main Header -->
    <div th:replace="/include/back_header::header"></div>
    <!-- Left side column. contains the logo and sidebar -->
    <div th:replace="/include/back_sidebar::sidebar"></div>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper" style="min-height: 1125.8px;">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                User Profile
            </h1>
        </section>

        <!-- Main content -->
        <section class="content">

            <div class="row">
                <div class="col-md-3">

                    <!-- Profile Image -->
                    <div class="box box-primary">
                        <div class="box-body box-profile">
                            <img class="profile-user-img img-responsive img-circle" th:src="@{/images/img.jpg}" alt="User profile picture">

                            <h3 class="profile-username text-center"><span sec:authentication="principal.username"></span></h3>

                            <p class="text-muted text-center">Software Engineer</p>


                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->

                </div>
                <!-- /.col -->
                <div class="col-md-9">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#settings" data-toggle="tab" aria-expanded="true">设置</a></li>
                        </ul>
                        <div class="tab-content">

                            <div class="tab-pane active" id="settings">
                                <form class="form-horizontal" th:action="@{/save-profile}" method="post">
                                    <div class="form-group" id="divId">
                                        <label  class="col-sm-2 control-label">Id</label>

                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" name="userId" placeholder="Name" th:value="${user.userId}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">Name</label>

                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" name="username" placeholder="Name" th:value="${user.userName}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">密码</label>

                                        <div class="col-sm-10">
                                            <input type="button" class="form-control" name="password" id="password" value="重设密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputExperience" class="col-sm-2 control-label">个人简介</label>

                                        <div class="col-sm-10">
                                            <textarea class="form-control" name="profile" th:text="${user.userProfile}"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="submit" class="btn btn-danger">保存</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- /.tab-pane -->
                        </div>
                        <!-- /.tab-content -->
                    </div>
                    <!-- /.nav-tabs-custom -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <!-- Main Footer -->
    <div th:replace="/include/back_footer::footer"></div>

</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->
<div th:replace="include/javascript::javascript"></div>
<!-- page script -->
<script th:inline="javascript">
    $(function () {
        $("#divId").hide();
        $("#user-branch").addClass("active");
        $('#example').DataTable({
            'paging': true,
            'lengthChange': true,
            'searching': true,
            'ordering': true,
            'bAutoWidth': false,
            'info': true,
            'autoWidth': false,
            'aLengthMenu':[7,10,20]
        });
        $("#password").on("click",function () {
            $("#password").attr("type","text");
            $("#password").val("");

        })
    });


    $(".sidebar-menu li").click(function (e) {
        $(".sidebar-menu li").removeClass("active");
        $(this).addClass("active");
    });
</script>
</body>
</html>